<template>
  <!--其他查询-->
  <div class="flex flex-vertical-center choose-tab">
    <div class="flex">
      <div class="flex flex-vertical-center" style="min-width: 300px">
        <span class="check-time">推广时间：</span>
        <DatePicker
          type="daterange"
          :clearable="false"
          @on-change="dateChoose"
          ref="oselect"
          placeholder="请选择时间"
          v-model="dateTime"
          :options="options"></DatePicker>
      </div>
      <ul
        class="flex flex-horizontal-between flex-vertical-center date-list"
        style="padding: 0 20px; min-width: 120px"
        v-if="tabType != 'content'">
        <li
          v-for="(item, index) in dateList"
          :key="index"
          :class="[{ selected: item.key == checkIndex }]"
          @click="initDateFun(item.key)">
          {{ item.title }}
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
  import homeMgr from '@/biz/buildingHome/home'
  export default {
    props: {
      dateList: {
        type: Array,
        default: function () {
          return [
            {
              title: '本周',
              key: 2
            },
            {
              title: '本月',
              key: 3
            }
          ]
        }
      }
    },
    data() {
      return {
        resolveTime: {
          startTime: '',
          endTime: ''
        },
        checkIndex: 2,
        dateTime: [],
        options: {
          disabledDate(date) {
            return date && date.valueOf() < new Date().getTime() - 365 * 2 * 24 * 3600 * 1000
          }
        },
        tabType: ''
      }
    },
    methods: {
      // 初始化
      initDateFun(checkIndex, tabType) {
        this.tabType = tabType
        this.checkIndex = checkIndex
        this.dateTime = []
        console.log(this.tabType)
        if (tabType == 'content') {
          this.resolveTime.startTime = ''
          this.resolveTime.endTime = ''
        } else {
          this.resolveTime = {
            startTime: homeMgr.resovleTime(this.checkIndex).startTime + ' 00:00:00',
            endTime: homeMgr.resovleTime(this.checkIndex).endTime + ' 23:59:59'
          }
        }
        this.$emit('oncheckDate', this.resolveTime)
      },
      dateChoose(val) {
        if (val[0] == '' || val[1] == '') {
          return false
        }

        if (this.$tool.dateDiff(val[0], val[1]).Y >= 2) {
          this.dateTime = []
          this.$Message.info('自定义日期跨度至多两年')
          this.initDateFun(2)

          return false
        }

        this.checkIndex = null
        this.resolveTime = {
          startTime: val[0] + ' 00:00:00',
          endTime: val[1] + ' 23:59:59'
        }
        this.$emit('oncheckDate', this.resolveTime)
      }
    }
  }
</script>
<style lang="scss" scoped>
  .choose-tab {
    max-width: 65%;

    li {
      padding: 0 5%;
      color: #666;
      height: 50px;
      line-height: 50px;
      word-break: keep-all;
      cursor: pointer;
    }

    li.selected {
      border-bottom: 3px solid #0088ff;
      color: #0088ff;
      font-weight: 600;
    }

    .check-time {
      word-break: keep-all;
      padding: 0 5%;
      color: #666;
      height: 50px;
      line-height: 50px;
      max-width: 100px;
    }
  }
</style>
